<template>
    <div>
        <div class="OrderView">
            <div class="header">
                <div class="head">
                    <div class="titlebox">
                        <div class="img" @click="rett">
                            <svg t="1668610356819" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3329" width="200" height="200">
                                <path
                                    d="M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z"
                                    fill="#444444" p-id="3330"></path>
                            </svg>
                        </div>
                        <div class="mine">
                            我的订单
                        </div>

                        <div class="shop">
                            商城订单
                        </div>
                    </div>

                    <div class="classify">
                        <div :class="{ con: bon == 0 }" @click="Page(0)">
                            全部
                        </div>
                        <div class="box">
                            充值
                        </div>
                        <div :class="{ con: bon == 3 }" @click="Page(3)">
                            消费
                        </div>
                        <div class="box">
                            赠送
                        </div>

                    </div>




                </div>
            </div>
            <AllOrders v-if="bon == 0"></AllOrders>
            <ConsumeView v-if="bon == 3"></ConsumeView>


        </div>
    </div>
</template>

<script>
import AllOrders from "../components/AllOrders.vue"
import ConsumeView from "../components/ConsumeView.vue"
export default {
    data() {
        return {
            bon: 0,

        }
    },
    components: {
        AllOrders,
        ConsumeView
    },

    methods: {
        Page(i) {
            this.bon = i
        },
        rett() {
            this.$router.push("/MineView")
        }
    },


}
</script>

<style lang="scss" scoped>
.OrderView {
    .header {
        background-color: #fff;

        .head {
            padding-top: 14px;
            background-color: #fff;

            .titlebox {
                display: flex;
                padding: 0 10px;
                padding-bottom: 20px;
                justify-content: space-between;
                align-items: baseline;

                .img {
                    .icon {
                        width: auto;
                        height: 18px;
                    }
                }

                .mine {
                    font-size: 16px;
                    color: #000;
                    padding-left: 30px;

                }


                .shop {
                    font-size: 13px;
                    color: #000;
                }


            }

            .classify {
                display: flex;
                justify-content: space-around;

                div {
                    font-size: 14px;
                    padding-bottom: 5px;
                }

                .con {
                    color: #468c6a;
                    border-bottom: 1px solid #468c6a;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>